<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="formIs"
      class="bg-bg_color w-[99/100] pl-8 pt-4"
    >
      <el-form-item label="公司名：" prop="code">
        <el-input
          v-model="formIs.company_name"
          placeholder="请输入姓名"
          clearable
          @change="onSearch(formIs)"
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="法人名">
        <el-input
          v-model="formIs.legal_name"
          placeholder="请输入法人代表"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="管理员名：">
        <el-input
          v-model="formIs.admin_nick"
          placeholder="请输入法人代表"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon(Search)"
          :loading="loading"
          @click="onSearch(formIs)"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar title="公司列表" @refresh="onSearch">
      <template #buttons>
        <el-button
          type="primary"
          :icon="useRenderIcon(AddFill)"
          @click="addUserAdmin()"
        >
          贷款添加
        </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table
          border
          ref="waterRef"
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="columns"
          :checkList="checkList"
          :pagination="pagination"
          :paginationSmall="size === 'small' ? true : false"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }"
          @selection-change="handleSelectionChange"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(EditPen)"
              @click="handleUpdateUser(row)"
            >
              修改
            </el-button>
            <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(Delete)"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(EditPen)"
              @click="handleAddroute(row)"
              v-auth="'role_allocation'"
            >
              分配路由
            </el-button>
            <div>
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(EditPen)"
                @click="handleShareholderEditor(row)"
              >
                股东编辑
              </el-button>
            </div>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <loanListDialog
      :titleInfo="titleInfo"
      ref="comPanyDialogRef"
      @handleClose="handleClose"
      :isEdit="isEdit"
      @handleSubmit="handleSubmit"
    />
    <shareEditorDialog
      ref="shareEditorDialogRef"
      :isShareEditor="isShareEditor"
    />
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, inject, onMounted, nextTick } from "vue";
import { useRole } from "./hook";
import type { ElTreeV2 } from "element-plus";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getRoleList, getRoleUpdate } from "@/api/user";
import { message } from "@/utils/message";
import * as CryptoJS from "crypto-js";
import { transformI18n } from "@/plugins/i18n";
import { storageSession } from "@pureadmin/utils";
import { getSessionKey } from "@/utils/auth";
import { getRoleInfo } from "@/api/user";
import { useUserStoreHook } from "@/store/modules/user";
import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
import Refresh from "@iconify-icons/ep/refresh";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import AddFill from "@iconify-icons/ri/add-circle-line";
import { getList } from "../../../api/loanInfo";
import loanListDialog from "./components/loanListDialog.vue";
import shareEditorDialog from "./components/shareEditorDialog.vue";
import { manageInsert, manageUpdate } from "@/api/loanListPage";

const comPanyDialogRef = ref("");
const shareEditorDialogRef = ref("");
const isShareEditor = ref("");
interface FormType {
  company_name: string; //公司名
  legal_name: string; //法人名
  admin_nick: string; //管理员名
}
const options = ref([
  {
    value: "1",
    label: "小规模"
  },
  {
    value: "2",
    label: "一般纳税人"
  }
]);
const isEdit = ref("");
const refresh: any = inject("reload");
const dialogFormVisible = ref(false);
const formRef = ref();
const menus = ref([]);
const adminId = ref(false);
const waterRef = ref();
const dialogRoute = ref(false);
const formLabelWidth = "100px";
const roleId = ref("");
const roleName = ref("");
const checkedKeys = ref([]);
const titleInfo = ref("");
const editDialogRef = ref("");
const dialogVisible = ref(false);
const infoData = ref({});
const formIs = reactive<FormType>({
  company_name: "",
  legal_name: "",
  admin_nick: ""
});

const {
  loading,
  columns,
  dataList,
  pagination,
  // buttonClass,
  onSearch,
  resetForm,
  // handleUpdate,
  handleDelete,
  handleSizeChange,
  handleCurrentChange,
  getList,
  handleSelectionChange
} = useRole(waterRef);
// 编辑添加
const addUserAdmin = () => {
  isEdit.value = "0";
  titleInfo.value = "贷款添加";
  nextTick(() => {
    comPanyDialogRef.value.opneDialogVisible();
  });
};
const handleClose = () => {
  dialogVisible.value = false;
};
// 股东编辑
const handleShareholderEditor = row => {
  const companyId = JSON.parse(JSON.stringify(row)).id;
  isEdit.value = "1";
  nextTick(() => {
    shareEditorDialogRef.value.openShareEditorDialog(companyId);
  });
};
const rowId = ref("");
const handleUpdateUser = row => {
  console.log(row, "===");
  titleInfo.value = "公司修改";
  isEdit.value = "1";
  nextTick(() => {
    comPanyDialogRef.value.opneDialogVisible(row);
  });
};
const handleSubmit = params => {
  const obj = { ...params };
  obj.admin_id = getSessionKey().admin_id;
  if (isEdit.value == "0") {
    manageInsert(obj).then(res => {
      if (res.code == 200) {
        message(res.msg, { type: "success" });
        getList();
      }
    });
  } else {
    manageUpdate(obj).then(res => {
      if (res.code == 200) {
        message(res.msg, { type: "success" });
        getList();
      }
    });
  }
};
// 弹框取消
const handleCancel = () => {
  console.log(323423);
  editDialogRef.value.closeDialogFormVisible();
};
const handleInput = () => {
  formIs.name = formIs.name.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, "");
};
const handleInputPhone = value => {
  formIs.phone = value.replace(/[^\d]/g, "");
};

onMounted(() => {});
</script>
<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
